<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国象棋AI服务</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-chess"></i> 中国象棋AI服务</h1>
        
        <div class="game-container">
            <div class="board-container">
                <canvas id="chessboard" width="510" height="570"></canvas>
                <div class="controls">
                    <div class="difficulty-control">
                        <label for="difficulty">AI难度:</label>
                        <select id="difficulty">
                            <option value="1">简单</option>
                            <option value="2" selected>中等</option>
                            <option value="3">困难</option>
                            <option value="4">大师</option>
                        </select>
                    </div>
                    <div class="buttons">
                        <button id="new-game"><i class="fas fa-plus-circle"></i> 新游戏</button>
                        <button id="undo"><i class="fas fa-undo"></i> 悔棋</button>
                        <button id="ai-move"><i class="fas fa-robot"></i> AI走棋</button>
                    </div>
                </div>
            </div>
            
            <div class="game-info">
                <div class="status-box">
                    <h3>游戏状态</h3>
                    <div id="game-status">红方先行</div>
                </div>
                <div class="move-history">
                    <h3>走棋记录</h3>
                    <div id="move-list"></div>
                </div>
                <div class="fen-display">
                    <h3>棋局信息</h3>
                    <textarea id="fen-string" readonly></textarea>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>象棋AI服务 | 基于Pikafish引擎 | 使用Flask部署</p>
        </div>
    </div>
    
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
